<!-- 出题 -->
<template>
  <div class="upload-subject">
    <div id="load" v-if="isLoad">
      <Load />
    </div>
    <div class="subject-main" v-else>
      <div class="title">题目录入</div>
      <div class="subject-container">
        <!-- 题目类型 -->
        <div class="subject-type">
          <div
            :class="[activeIndex == index ? 'btn active' : 'btn']"
            v-for="(item, index) in subjectType"
            :key="index"
            @click="handlerChangeComponent(index)"
          >
            {{ item.type }}
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
        <!-- 题目表单 -->
        <div class="subject-form">
          <component :is="component"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import BriefSubjectVue from "./SubjectTypeForm/BriefSubject.vue";
import JudgeSubjectVue from "./SubjectTypeForm/JudgeSubject.vue";
import MultipleSubjectVue from "./SubjectTypeForm/MultipleSubject.vue";
import RadioSubject from "./SubjectTypeForm/RadioSubject.vue";
import { ref, reactive, onMounted } from "vue";
import Load from "@/components/Load.vue";
import { useRoute } from "vue-router";

let $route = useRoute();

const isLoad = ref(true);

// 动态组件
const component = ref(RadioSubject);

const activeIndex = ref(0);

// 配合动态切换组件
const subjectType = reactive([
  {
    type: "单选题",
    component: RadioSubject,
  },
  {
    type: "多选题",
    component: MultipleSubjectVue,
  },
  {
    type: "判断题",
    component: JudgeSubjectVue,
  },
  {
    type: "简答题",
    component: BriefSubjectVue,
  },
]);

onMounted(() => {
  if ($route.query.type) {
    handlerChangeComponent($route.query.type - 1);
  }
  setTimeout(() => {
    isLoad.value = false;
  }, 1000);
});

// 动态切换组件
const handlerChangeComponent = (index) => {
  component.value = subjectType[index].component;
  activeIndex.value = index;
};
</script>

<style scoped lang="scss">
#load {
  min-height: calc(100vh - 155px);
  display: flex;
  align-items: center;
}
.upload-subject {
  width: 100%;
  min-height: calc(100vh - 55px);
  padding: 50px;
  box-sizing: border-box;
  .subject-main {
    width: 70%;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 50px;
    .title {
      width: 100%;
      height: 40px;
      font-size: 1.4em;
      font-weight: 550;
      color: #7f7f7f;
    }
    .subject-container {
      width: 100%;
      height: 100%;
      display: flex;
      .subject-type {
        width: 20%;
        display: flex;
        flex-direction: column;
        .btn {
          border: 1px solid #ccc;
          width: 80%;
          margin: 8px 0;
          padding: 5px;
          border-radius: 4px;
          box-sizing: border-box;
          font-size: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .active {
          color: rgba(36, 111, 215, 0.698);
          border: 1px solid rgb(157, 185, 227);
        }
        .btn:hover {
          color: rgba(36, 111, 215, 0.698);
          border: 1px solid rgb(157, 185, 227);
        }
      }
      .subject-form {
        width: 75%;
        height: 100%;
        background-color: rgba(233, 233, 246, 0.331);
        border: 1px solid #e7e7e7ca;
        box-sizing: border-box;
        padding: 20px;
        overflow: scroll;
        overflow-x: hidden;
      }
    }
  }
}
</style>